<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="form">
        <div class="input-group">
            <label for="">用户名:</label>
            <input type="text" id="user">
            <span id="userTips"></span>
        </div>
        <div class="input-group">
            <button id="btn">点击</button>
        </div>
    </div>
</body>
<script>
    
    // trim()       去除首尾空格(不去除中间) 
    // trimLeft()   去除头部空格(不去除中间) 
    // trimRight()  去除尾部空格(不去除中间) 

    // 返回值: 去除空格后的新字符串



    var userInp = document.getElementById("user");
    var userTips = document.getElementById("userTips");
    var btn = document.getElementById("btn");

    btn.onclick = function () {
        // var user = userInp.value;// 输入框取值(字符串)
        var user = userInp.value.trim();// 输入框取值(字符串) -> 调用trim() -> 结果赋值变量user 
        var user = userInp.value.trimLeft();
        var user = userInp.value.trimRight();
        console.log(1,user);


        userInp.value = user;//能改变元素的只有元素本身
    }



</script>

</html>